<template>
  <div class="car">
    <h2>一辆{{ car.bard }}车，价值{{ car.price }}万元</h2>
    <button @click="setPrice()">修改车辆价格</button>
    <br>
    <ul>
      <li v-for="aaa in games" v-bind:key="aaa.id">{{ aaa.name }}</li>
    </ul>
    <button @click="setOneName()">修改第一个游戏的名字</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'Car'
}
</script>


<script setup lang="ts">
import {ref} from "vue";

// 数据
let car = ref({
  bard: "奔驰",
  price: 100
});

// 数据
let games = ref([
  {id: "01", name: "王者荣耀"},
  {id: "02", name: "QQ飞车"},
  {id: "03", name: "原神"}
]);

// 方法
function setPrice() {
  car.value.price += 10;
};

function setOneName() {
  games.value[0].name = "蛋仔派对";
}
</script>

<style scoped>
.car {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>